<template>
	<view>
		<u-form :model="selectCourseManagerVo">
			<u-form-item style="margin-left: 6%;">
				<u-input placeholder="请输入需要查找的课程名" v-model="selectCourseManagerVo.courseManager.courseName" />
			</u-form-item>
			<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			<u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select>
			<u-button style="margin-left: 3%;" :custom-style2="customStyle" size="mini" @click="show=true">
				选择学分:{{selectCourseManagerVo.courseManager.courseCredit}}学分</u-button>
			<u-button style="margin-left: 3%;" :custom-style2="customStyle" size="mini" @click="show2=true">
				选择周几:{{selectCourseManagerVo.courseManager.courseWeek}}</u-button>
			<u-button style="margin-left: 3%;" size="mini" :custom-style="customStyle" type="primary" @click="reset">重置
			</u-button>
			<u-button style="margin-left: 3%;" size="mini" :custom-style="customStyle" type="primary" @click="select">查找
			</u-button>
		</u-form>

		<u-card margin="20rpx" padding="10" v-for="item in lessons">
			<view class="" slot="head">
				<text style="color: #be611f;font-size: 35rpx;">{{item.courseName}}</text>
				<view style="text-align: right;">
					<text
						style="font-size: 30rpx;">{{item.teacherName}}&nbsp;&nbsp;&nbsp;&nbsp;学分:{{item.courseCredit}}</text>
				</view>
			</view>
			<view class="" slot="body">
				<view class="u-body-item-title u-line-1">
					<u-tag :text="item.courseWeek" type="success" mode="light" />
					<text>{{item.courseStartTime}}--{{item.courseEndTime}}</text>
					<u-tag style="margin-left: 8%;" text="上课地点:" mode="light" />
					<text>{{item.area.areaPosition}}{{item.area.areaFloor}}层{{item.area.areaDetail}}</text>
				</view>
			</view>
			<view class="" slot="foot">
				<u-icon name="account" size="34" color="" :label="'当前剩余:'+item.coursePerson"> </u-icon>
				<u-button style="margin-left: 30%;" :custom-style="customStyle" size="mini" @click="detail(item.course.id,item.teacher.id)">详情
				</u-button>
				<u-button :throttle-time="3000" style="margin-left: 3%;" size="mini" :custom-style="customStyle" type="primary"
					@click="submit(item)">我要选课</u-button>
			</view>
		</u-card>
		<u-popup v-model="show3" mode="center" width="70%" height="48%">
			<view style="margin-left: 10px;margin-right: 5px;margin-top: 8%;margin-bottom: 5%;">
				<view>
				<text style="font-size: 30rpx;color: #00bebe;">教师评分：(满分5)\n</text><text style="font-size: 35rpx;color: #be0e3d;">{{teacherdetail.grade}}</text><text>(当前累计有：{{teacherdetail.total}}人评价)</text>
				<u-card padding="10" title="教师相关评价" sub-title="截取最新5条">
						<view class="" slot="body">
							<view v-for="item in teacherContent" class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							{{item.content}}—评分：{{item.grade}}
							</view>
						</view>				
				</u-card>
				</view>
				<view>
				<text style="font-size: 30rpx;color: #00bebe;">\n课程评分：(满分5)\n</text><text style="font-size: 35rpx;color: #be0e3d;">{{coursedetail.grade}}</text><text>(当前累计有：{{coursedetail.total}}人评价)</text>
				<u-card padding="10" title="课程相关评价" sub-title="截取最新5条">
						<view class="" slot="body">
							<view v-for="item in courseContent" class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							{{item.content}}—评分：{{item.grade}}
							</view>
						</view>				
				</u-card>
				</view>
			</view>
		</u-popup>
		<page-pagination :total="page.total" :currentPage="page.currentPage" :pageSize="page.pageSize" :showAround="true" :btnText="true"
			:showPageInfo="true" @change="change"></page-pagination>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluateVo:{
					evaluate:{
						teacher:{
							id:''
						},
						course:{
							id:''
						}
					},
					page:1
				},
				teacherContent:[],
				courseContent:[],
				teacherdetail:{
					total:'',
					grade:''
				},
				coursedetail:{
					total:'',
					grade:''
				},
				show: false,
				show2: false,
				show3: false,
				list: [{
						value: '0',
						label: '重置'
					},
					{
						value: '1',
						label: '1学分'
					},
					{
						value: '2',
						label: '2学分'
					},
					{
						value: '3',
						label: '3学分'
					},
					{
						value: '4',
						label: '4学分'
					}
				],
				list2: [{
						value: '0',
						label: '重置'
					},
					{
						value: '周一',
						label: '周一'
					},
					{
						value: '周二',
						label: '周二'
					},
					{
						value: '周三',
						label: '周三'
					},
					{
						value: '周四',
						label: '周四'
					},
					{
						value: '周五',
						label: '周五'
					},
					{
						value: '周六',
						label: '周六'
					},
					{
						value: '周日',
						label: '周日'
					}
				],
				customStyle: {
					width: "60px",
				},
				customStyle2: {
					width: "100px",
				},
				lessons: [],
				selectCourseManagerVo: {
					courseManager: {
						courseName: '',
						courseWeek: '',
						courseCredit: ''
					},
					page: 1
				},
				page: {
					total: 100,
					pageSize: 10,
					currentPage: 1
				},
				selectCourseVo:{
					studentId:'',
					courseManagerId:'',
					courseId:'',
					teacherId:'',
					classId:'',
					courseWeek:'',
					courseStartTime:'',
					courseEndTime:'',
					term:'',
					courseCredit:''
				}
			}
		},
		onLoad() {},
		methods: {
			submit(data,button){
				this.selectCourseVo.courseManagerId=data.id;
				this.selectCourseVo.courseId=data.course.id;
				this.selectCourseVo.teacherId=data.teacher.id;
				this.selectCourseVo.courseWeek=data.courseWeek;
				this.selectCourseVo.courseStartTime=data.courseStartTime;
				this.selectCourseVo.courseEndTime=data.courseEndTime;
				this.selectCourseVo.term=data.term;
				this.selectCourseVo.courseCredit=data.courseCredit;	
				// console.log(this.selectCourseVo);
				this.$axios.post("/api/v1/student/selectcourse",this.selectCourseVo).then(res => {
					if(res.data.code==200){
						uni.showToast({
							title: '选课成功！',
							icon: 'success'
						});
					}else if(res.data.code==801){
						uni.showToast({
							title: '请勿重复点击！',
							icon: 'warn'
						});
					}else if(res.data.code==802){
						uni.showToast({
							title: '请勿重复选课！',
							icon: 'warn'
						});
					}else if(res.data.code==803){
						uni.showToast({
							title: '课程时间冲突，请重新选择！',
							icon: 'warn'
						});
					}else if(res.data.code==804){
						uni.showToast({
							title: '该课程人数已满，请重新选择！',
							icon: 'warn'
						});
					}
				});
			},
			detail(courseId,teacherId){
				this.show3=true;
				this.$axios.get("/api/v1/student/evaluate/teacher/"+teacherId).then(res => {
					if(res.data.data.grade==null){
						this.teacherdetail.grade="暂无";
					}else{
						this.teacherdetail.grade=parseFloat(res.data.data.grade).toFixed(2);
					}
					this.teacherdetail.total=res.data.data.total;
				});
				this.evaluateVo.evaluate.teacher.id=teacherId;
				this.evaluateVo.evaluate.course.id='';
				this.$axios.post("/api/v1/student/evaluate/condition",this.evaluateVo).then(res => {
					this.teacherContent=res.data.data.data;
				});
				
				
				this.$axios.get("/api/v1/student/evaluate/course/"+courseId).then(res => {
					if(res.data.data.grade==null){
						this.coursedetail.grade="暂无";
					}else{
						this.coursedetail.grade=parseFloat(res.data.data.grade).toFixed(2);
					}
					this.coursedetail.total=res.data.data.total;
				});
				this.evaluateVo.evaluate.teacher.id='';
				this.evaluateVo.evaluate.course.id=courseId;
				this.$axios.post("/api/v1/student/evaluate/condition",this.evaluateVo).then(res => {
					this.courseContent=res.data.data.data;
				});
				
				
			},
			reset() {
				this.selectCourseManagerVo.courseManager.courseName = "";
				this.selectCourseManagerVo.courseManager.courseCredit = "";
				this.selectCourseManagerVo.courseManager.courseWeek = "";
				this.changePage(1);
			},
			select() {
				this.changePage(1);
			},
			confirm(e) {
				if (e[0].value == "0") {
					this.selectCourseManagerVo.courseManager.courseCredit = "";
				}else{
					this.selectCourseManagerVo.courseManager.courseCredit = e[0].value;
				}
				
			},
			confirm2(e) {
				if (e[0].value == "0") {
					this.selectCourseManagerVo.courseManager.courseWeek = "";
				}else{
					this.selectCourseManagerVo.courseManager.courseWeek = e[0].value;
				}
				
			},
			change(currentPage, type) {
				this.page.currentPage = currentPage;
				this.changePage(currentPage);
			},
			changePage(page) {
				this.selectCourseManagerVo.page = page;
				this.page.currentPage = page;
				console.log(this.page.currentPage);
				this.$axios.post("/api/v1/student/selectcourse/get", this.selectCourseManagerVo).then(res => {
					this.lessons = res.data.data.data;
					this.page.total = res.data.data.totalNum;
				});
			}
		},
		created() {
			this.changePage(1);
			this.selectCourseVo.studentId=uni.getStorageSync("studentId");
			this.selectCourseVo.classId=uni.getStorageSync("classId");
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 100rpx;
	}

	.title {
		font-size: 28rpx;
		line-height: 32rpx;
		padding: 45rpx 30rpx 18rpx;
		color: rgba(69, 90, 100, 0.6);
	}
</style>
